<!DOCTYPE html>
<html lang="CN">
<head><meta name="generator" content="Hexo 3.8.0">
    <meta charset="utf-8">
    
    <title>前端通用规范 | IFC documents</title>
    
    
        <meta name="keywords" content="前端通用规范">
    
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="description" content="通用规范tab键用两个空格代替 因为在不同系统的编辑工具对tab解析不一样，windows下的tab键是占四个空格的位置，而在linux下会变成占八个空格的位置（除非你 自己设定了tab键所占的位置长度）。 每个样式属性或者每句代码后加 “;”,方便压缩工具”断句”。  HTML规范HTML5 doctype为每个 HTML 页面的第一行添加标准模式（standard mode）的声明，这样能够确">
<meta property="og:type" content="website">
<meta property="og:title" content="前端通用规范">
<meta property="og:url" content="http://cloudloan.gitee.io/ifc_documents/categories/前端/前端通用规范.html">
<meta property="og:site_name" content="IFC documents">
<meta property="og:description" content="通用规范tab键用两个空格代替 因为在不同系统的编辑工具对tab解析不一样，windows下的tab键是占四个空格的位置，而在linux下会变成占八个空格的位置（除非你 自己设定了tab键所占的位置长度）。 每个样式属性或者每句代码后加 “;”,方便压缩工具”断句”。  HTML规范HTML5 doctype为每个 HTML 页面的第一行添加标准模式（standard mode）的声明，这样能够确">
<meta property="og:locale" content="CN">
<meta property="og:updated_time" content="2019-03-20T11:29:53.821Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="前端通用规范">
<meta name="twitter:description" content="通用规范tab键用两个空格代替 因为在不同系统的编辑工具对tab解析不一样，windows下的tab键是占四个空格的位置，而在linux下会变成占八个空格的位置（除非你 自己设定了tab键所占的位置长度）。 每个样式属性或者每句代码后加 “;”,方便压缩工具”断句”。  HTML规范HTML5 doctype为每个 HTML 页面的第一行添加标准模式（standard mode）的声明，这样能够确">
    

    

    
        <link rel="icon" href="/ifc_documents/favicon.ico">
    

    <link rel="stylesheet" href="/ifc_documents/libs/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="/ifc_documents/libs/open-sans/styles.css">
    <link rel="stylesheet" href="/ifc_documents/libs/source-code-pro/styles.css">

    <link rel="stylesheet" href="/ifc_documents/css/style.css">
    <script src="/ifc_documents/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="/ifc_documents/libs/jquery/plugins/cookie/1.4.1/jquery.cookie.js"></script>
    
    
        <link rel="stylesheet" href="/ifc_documents/libs/lightgallery/css/lightgallery.min.css">
    
    
        <link rel="stylesheet" href="/ifc_documents/libs/justified-gallery/justifiedGallery.min.css">
    
    
    
    


    
        <script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
    
</head>
</html>
<body>
    <div id="container">
        <header id="header">
    <div id="header-main" class="header-inner">
        <div class="outer">
            <a href="/ifc_documents/" id="logo">
                <i class="logo"></i>
                <span class="site-title">IFC documents</span>
            </a>
            <nav id="main-nav">
                
                    <a class="main-nav-link" href="/ifc_documents/">首页</a>
                
                    <a class="main-nav-link" href="/ifc_documents/archives">归档</a>
                
                    <a class="main-nav-link" href="/ifc_documents/categories">分类</a>
                
                    <a class="main-nav-link" href="/ifc_documents/tags">标签</a>
                
                    <a class="main-nav-link" href="/ifc_documents/about">关于</a>
                
            </nav>
            
            <div id="search-form-wrap">

    <form class="search-form">
        <input type="text" class="ins-search-input search-form-input" placeholder="Search">
        <button type="submit" class="search-form-submit"></button>
    </form>
    <div class="ins-search">
    <div class="ins-search-mask"></div>
    <div class="ins-search-container">
        <div class="ins-input-wrapper">
            <input type="text" class="ins-search-input" placeholder="Type something...">
            <span class="ins-close ins-selectable"><i class="fa fa-times-circle"></i></span>
        </div>
        <div class="ins-section-wrapper">
            <div class="ins-section-container"></div>
        </div>
    </div>
</div>
<script>
(function (window) {
    var INSIGHT_CONFIG = {
        TRANSLATION: {
            POSTS: 'Posts',
            PAGES: 'Pages',
            CATEGORIES: 'Categories',
            TAGS: 'Tags',
            UNTITLED: '(Untitled)',
        },
        ROOT_URL: '/ifc_documents/',
        CONTENT_URL: '/ifc_documents/content.json',
    };
    window.INSIGHT_CONFIG = INSIGHT_CONFIG;
})(window);
</script>
<script src="/ifc_documents/js/insight.js"></script>

</div>
        </div>
    </div>
    <div id="main-nav-mobile" class="header-sub header-inner">
        <table class="menu outer">
            <tr>
                
                    <td><a class="main-nav-link" href="/ifc_documents/">首页</a></td>
                
                    <td><a class="main-nav-link" href="/ifc_documents/archives">归档</a></td>
                
                    <td><a class="main-nav-link" href="/ifc_documents/categories">分类</a></td>
                
                    <td><a class="main-nav-link" href="/ifc_documents/tags">标签</a></td>
                
                    <td><a class="main-nav-link" href="/ifc_documents/about">关于</a></td>
                
                <td>
                    
    <div class="search-form">
        <input type="text" class="ins-search-input search-form-input" placeholder="Search">
    </div>

                </td>
            </tr>
        </table>
    </div>
</header>

        <div class="outer">
            
            
                <aside id="sidebar">
   
        
    
    <div id="toTop" class="fa fa-angle-up"></div>
</aside>
            
            <section id="main"><article id="page-" class="article article-type-page" itemscope itemprop="blogPost">
    <div class="article-inner">
        
        
            <header class="article-header">
                
                
    
        <h1 class="article-title" itemprop="name">
            前端通用规范
        </h1>
    

            </header>
        
        
        <div class="article-entry" itemprop="articleBody">
        
        
            
        
        
            <h1 id="通用规范"><a href="#通用规范" class="headerlink" title="通用规范"></a>通用规范</h1><h3 id="tab键用两个空格代替"><a href="#tab键用两个空格代替" class="headerlink" title="tab键用两个空格代替"></a>tab键用两个空格代替</h3><ol>
<li>因为在不同系统的编辑工具对tab解析不一样，windows下的tab键是占四个空格的位置，而在linux下会变成占八个空格的位置（除非你 自己设定了tab键所占的位置长度）。</li>
<li>每个样式属性或者每句代码后加 “;”,方便压缩工具”断句”。</li>
</ol>
<h1 id="HTML规范"><a href="#HTML规范" class="headerlink" title="HTML规范"></a>HTML规范</h1><h3 id="HTML5-doctype"><a href="#HTML5-doctype" class="headerlink" title="HTML5 doctype"></a>HTML5 doctype</h3><p>为每个 HTML 页面的第一行添加标准模式（standard mode）的声明，这样能够确保在每个浏览器中拥有一致的展现。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE html&gt;</span><br><span class="line">&lt;html&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">&lt;/head&gt;</span><br><span class="line">&lt;/html&gt;</span><br></pre></td></tr></table></figure>
<h3 id="字符编码"><a href="#字符编码" class="headerlink" title="字符编码"></a>字符编码</h3><p>通过明确声明字符编码，能够确保浏览器快速并容易的判断页面内容的渲染方式。这样做的好处是，可以避免在 HTML 中使用字符实体标记（character entity），从而全部与文档编码一致（约定一致采用UTF-8编码）。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&lt;head&gt;</span><br><span class="line">&lt;meta charset=&quot;UTF-8&quot;&gt;</span><br><span class="line">&lt;/head&gt;</span><br></pre></td></tr></table></figure>
<h3 id="文档模板"><a href="#文档模板" class="headerlink" title="文档模板"></a>文档模板</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE HTML&gt;</span><br><span class="line">&lt;html&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">&lt;meta charset=&quot;utf-8&quot; /&gt;</span><br><span class="line">&lt;title&gt;Sample page&lt;/title&gt;</span><br><span class="line">&lt;link rel=&quot;stylesheet&quot; href=&quot;css_example_url&quot; /&gt;</span><br><span class="line">&lt;script src=&quot;js_example_url&quot;&gt;&lt;/script&gt;</span><br><span class="line">&lt;/head&gt;</span><br><span class="line">&lt;body&gt;</span><br><span class="line">&lt;section id=&quot;page&quot;&gt;</span><br><span class="line">&lt;header id=&quot;header&quot;&gt;</span><br><span class="line">页头</span><br><span class="line">&lt;/header&gt;</span><br><span class="line">&lt;section id=&quot;body&quot;&gt;</span><br><span class="line">主体</span><br><span class="line">&lt;/section&gt;</span><br><span class="line">&lt;footer id=&quot;footer&quot;&gt;</span><br><span class="line">页尾</span><br><span class="line">&lt;/footer&gt;</span><br><span class="line">&lt;/section&gt;</span><br><span class="line">&lt;script&gt;</span><br><span class="line">// 你的代码</span><br><span class="line">&lt;/script&gt;</span><br><span class="line">&lt;/body&gt;</span><br><span class="line">&lt;/html&gt;</span><br></pre></td></tr></table></figure>
<h3 id="IE-兼容模式"><a href="#IE-兼容模式" class="headerlink" title="IE 兼容模式"></a>IE 兼容模式</h3><p>IE 支持通过特定的 <meta> 标签来确定绘制当前页面所应该采用的 IE 版本。除非有强烈的特殊需求，否则最好是设置为 edge mode，从而通知 IE 采用其所支持的最新的模式。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=Edge&quot;&gt;</span><br></pre></td></tr></table></figure>
<h3 id="自动让双核浏览器使用极速模式"><a href="#自动让双核浏览器使用极速模式" class="headerlink" title="自动让双核浏览器使用极速模式"></a>自动让双核浏览器使用极速模式</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;meta name=&quot;renderer&quot; content=&quot;webkit&quot; /&gt;</span><br></pre></td></tr></table></figure>
<h3 id="元素"><a href="#元素" class="headerlink" title="元素"></a>元素</h3><h5 id="html5元素"><a href="#html5元素" class="headerlink" title="html5元素"></a>html5元素</h5><ul>
<li><strong>section</strong> 表示文档中的节、区段，可以和h1-h6一起来显示文档结构</li>
<li><strong>article</strong> 表示一块比较独立的内容或者主题内容，块级元素，比如blog的内容，报纸的文章</li>
<li><strong>aside</strong> 表示article以外的内容，而且应该和article有一定的关系，块级元素</li>
<li><strong>hgroup</strong> 表示一个文档、区段(section)的标题组合</li>
<li><strong>header</strong> 表示页眉,页头</li>
<li><strong>footer</strong> 表示页脚</li>
<li><strong>nav</strong> 表示导航内容</li>
<li><strong>figure</strong> 表示以相对独立的或外引的元素，如img video</li>
<li><strong>figcaption</strong> 表示 figure内容的标题</li>
</ul>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line">&lt;!-- hgroup 示例 --&gt;</span><br><span class="line">&lt;hgroup&gt;</span><br><span class="line">&lt;h1&gt;文档主标题&lt;/h1&gt;</span><br><span class="line">&lt;h2&gt;文档副标题&lt;/h2&gt;</span><br><span class="line">&lt;/hgroup&gt;</span><br><span class="line"></span><br><span class="line">&lt;!-- figure 示例 --&gt;</span><br><span class="line">&lt;figure&gt;</span><br><span class="line">&lt;video src=&quot;ogg&quot;&gt;&lt;/video&gt;</span><br><span class="line">&lt;figcaption&gt;Example&lt;/figcaption&gt;</span><br><span class="line">&lt;/figure&gt;</span><br><span class="line"></span><br><span class="line">&lt;figure&gt;</span><br><span class="line">&lt;img src=&quot;img&quot; alt=&quot;Example image&quot; /&gt;</span><br><span class="line">&lt;figcaption&gt;Example image&lt;/figcaption&gt;</span><br><span class="line">&lt;/figure&gt;</span><br></pre></td></tr></table></figure>
<h4 id="结构性元素"><a href="#结构性元素" class="headerlink" title="结构性元素"></a>结构性元素</h4><ul>
<li><strong>p</strong> 表示段落。只能包含内联元素，不能包含块级元素;</li>
<li><strong>div</strong> 本身无特殊含义，可用于布局。几乎可以包含任何元素;</li>
<li><strong>br</strong> 表示换行符;</li>
<li><strong>hr</strong> 表示水平分割线;</li>
<li><strong>h1-h6</strong> 表示标题。其中 h1 用于表示当前页面最重要的内容的标题;</li>
<li><strong>blockquote</strong> 表示引用，可以包含多个段落。请勿纯粹为了缩进而使用 blockquote，大部分浏览器默认将 blockquote 渲染为带有左右缩进;</li>
<li><strong>pre</strong> 表示一段格式化好的文本;</li>
</ul>
<h4 id="头部元素"><a href="#头部元素" class="headerlink" title="头部元素"></a>头部元素</h4><ul>
<li><strong>title</strong> 每个页面必须有且仅有一个 title 元素;</li>
<li><strong>base</strong> 可用场景：首页、频道等大部分链接都为新窗口打开的页面;</li>
<li><strong>link</strong> link 用于引入 css 资源时，可省去 media(默认为all) 和 type(默认为text/css) 属性;</li>
<li><strong>style</strong> type 默认为 text/css，可以省去;</li>
<li><strong>script</strong> type 属性可以省去; 不赞成使用lang属性; 不要使用古老的&lt;!– //–&gt;这种hack脚本, 它用于阻止第一代浏览器（Netscape 1和Mosaic）将脚本显示成文字;</li>
<li><strong>noscript</strong> 在用户代理不支持 JavaScript 的情况下提供说明;</li>
</ul>
<h4 id="文本元素"><a href="#文本元素" class="headerlink" title="文本元素"></a>文本元素</h4><ul>
<li><strong>a</strong> a 存在 href 属性时表示链接，无 href 属性但有 name 属性表示锚点;</li>
<li><strong>em,strong</strong> em 表示句意强调，加与不加会引起语义变化，可用于表示不同的心情或语调; strong 表示重要性强调，可用于局部或全局，strong强调的是重要性，不会改变句意;</li>
<li><strong>abbr</strong> 表示缩写;</li>
<li><strong>sub,sup</strong> 主要用于数学和化学公式，sup还可用于脚注;</li>
<li><strong>span</strong> 本身无特殊含义;</li>
<li><strong>ins,del</strong> 分别表示从文档中增加(插入)和删除</li>
</ul>
<h4 id="媒体元素"><a href="#媒体元素" class="headerlink" title="媒体元素"></a>媒体元素</h4><ul>
<li><strong>img</strong> 请勿将img元素作为定位布局的工具，不要用他显示空白图片; 必要时给img元素增加alt属性;</li>
<li><strong>object</strong> 可以用来插入Flash;</li>
</ul>
<h4 id="列表元素"><a href="#列表元素" class="headerlink" title="列表元素"></a>列表元素</h4><ul>
<li><strong>dl</strong> 表示关联列表，dd是对dt的解释; dt和dd的对应关系比较随意：一个dt对应多个dd、多个dt对应一个dd、多个dt对应多个dd，都合法; 可用于名词/单词解释、日程列表、站点目录;</li>
<li><strong>ul</strong> 表示无序列表;</li>
<li><strong>ol</strong> 表示有序列表, 可用于排行榜等;</li>
<li><strong>li</strong> 表示列表项，必须是ul/ol的子元素;<h4 id="表单元素"><a href="#表单元素" class="headerlink" title="表单元素"></a>表单元素</h4></li>
</ul>
<p>推荐使用 button 代替 input，但必须声明 type;<br>表单元素的 name 不能设定为 action, enctype, method, novalidate, target, submit 会导致表单提交混乱</p>
<h3 id="属性顺序"><a href="#属性顺序" class="headerlink" title="属性顺序"></a>属性顺序</h3><ol>
<li><p>HTML 属性应当按照以下给出的顺序依次排列，确保代码的易读性。</p>
</li>
<li><p>class</p>
</li>
<li>id 、 name</li>
<li>data-*</li>
<li>src、for、 type、 href</li>
<li>title、alt</li>
<li><p>aria-*、 role</p>
</li>
<li><p>class用于标识高度可复用组件，因此应该排在首位。id 用于标识具体组件，应当谨慎使用（例如，页面内的书签），因此排在第二位。如：</p>
</li>
</ol>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&lt;a class=&quot;...&quot; id=&quot;...&quot; data-modal=&quot;toggle&quot; href=&quot;#&quot;&gt;</span><br><span class="line">Example link</span><br><span class="line">&lt;/a&gt;</span><br><span class="line">&lt;input class=&quot;form-control&quot; type=&quot;text&quot;&gt;</span><br><span class="line">&lt;img src=&quot;...&quot; alt=&quot;...&quot;&gt;</span><br></pre></td></tr></table></figure>
<h3 id="文件和目录命名约定"><a href="#文件和目录命名约定" class="headerlink" title="文件和目录命名约定"></a>文件和目录命名约定</h3><ol>
<li>一律小写，必须是英文单词或者汉语拼音，以英语单词优先，多个单词以连字符 ( - ) 连接。 只能出现小写英文字母，数字和连字符。</li>
<li>很多浏览器会将含有这些词的作为广告拦截： ad、ads、adv、banner、sponsor、gg、guangg、guanggao等 页面中尽量避免采用以上词汇来命名。</li>
<li>该命令规范适用于所有前端维护的内容和相关目录。(html, css, js, png, gif, jpg, ico)。</li>
</ol>
<h3 id="空格-标签-注释"><a href="#空格-标签-注释" class="headerlink" title="空格/标签/注释"></a>空格/标签/注释</h3><ul>
<li>用两个空格来代替制表符（tab） —— 这是唯一能保证在所有环境下获得一致展现的方法；</li>
<li>嵌套元素应当缩进一次 —— 即两个空格；</li>
<li>对于属性的定义，确保全部使用双引号，绝不要使用单引号；</li>
<li>不要省略可选的结束标签，如：<code>&lt;/li&gt;</code>  <code>&lt;/body&gt;</code></li>
<li>习惯性书写注释，方便日后维护；</li>
</ul>
<h3 id="文件编码约定"><a href="#文件编码约定" class="headerlink" title="文件编码约定"></a>文件编码约定</h3><p>所有文件统一采用UTF-8无BOM编码。换行格式为 unix 格式。</p>
<h3 id="id和class命名约定"><a href="#id和class命名约定" class="headerlink" title="id和class命名约定"></a>id和class命名约定</h3><ol>
<li>id 和 class 的命名基本原则: 内容优先，表现为辅。首先根据内容来命名，如:#header,#footer,.main-nav.如根据内容无法找到合适的命名，可以再结合表现进行命名，如：col-main, col-sub, col-extra,blue-box</li>
<li>id 和 class 的名称一律小写，多个单词以连字符连接，如： main-wrap</li>
<li>id 和 class 的名称只能出现，小写字母，数字和连字符( - )(js钩子除外)</li>
<li>id 和 class 的名称尽量使用英文单词命名,如确实找不到合适的单词，可以使用拼音，如：zhidao-com</li>
<li>在不影响语意的情况下，id 和 class 的名称 可以适当使用缩写，如: col, nav, hd, bd, fd( 缩写只用来表示结构，不允许写任何样式)。不要自造缩写。</li>
<li>class 对于选中命名.selected;对于hover，支持伪类使用:hover，不支持的使用 .hover，隐藏使用.hide 。</li>
<li>id 和 class 的选择，如果只使用一次，使用id,如果使用多次使用class，如果需要和js交互，使用id,如果需要交互并且页面中有大量重复，请参见下一条。</li>
<li>对于作为js钩子的 id 和 class 命名规则为以”J_“开头(J,象形钩子的形状)，后面加上原应有的命名，在使用class的时候需要放在最前面。如:class=”J_tab-content some-mod-content”。（注意：钩子，不允许在css中定义任何的样式效果）</li>
<li>很多浏览器会将含有这些词的作为广告拦截： ad、ads、adv、banner、sponsor、gg、guangg、guanggao等 页面中尽量避免采用以上词汇来命名。</li>
</ol>
<h3 id="文件引用"><a href="#文件引用" class="headerlink" title="文件引用"></a>文件引用</h3><ul>
<li>页面中不允许出现css内容(包括行内样式和style) <strong>(推荐，hot fix时，可临时在标签内直接书写样式)</strong></li>
<li>每个页面中至多包括3个css文件，1个 产品级 1个模块级 1个页面级别。<strong>(推荐做法，不强制)</strong></li>
</ul>
<h3 id="选择器"><a href="#选择器" class="headerlink" title="选择器"></a>选择器</h3><p>命名比较短的词，或者缩写的不允许直接定义样式，如：.title,.hd,.bd,.body.必须用上级节点进行限定,如：.recommend-mod .title</p>
<h3 id="通用结构"><a href="#通用结构" class="headerlink" title="通用结构"></a>通用结构</h3><p>页面中的块采用如下结构</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&lt;div class=&quot;mod recommend-mod&quot;&gt;</span><br><span class="line">&lt;div class=&quot;hd recommend-title&quot;&gt;Tilte &lt;/div&gt;</span><br><span class="line">&lt;div class=&quot;bd recommend-body&quot;&gt;contents&lt;/div&gt;</span><br><span class="line">&lt;div class=&quot;ft recommend-footer&quot;&gt;footer &lt;/div&gt;</span><br><span class="line">&lt;/div&gt;</span><br></pre></td></tr></table></figure>
<p>没有内容的部分可以省略，其中用来表示结构的 mod hd bd ft 不允许直接定义样式（避免嵌套带来样式问题）,需要定义样式的时候需要另外增加class以控制样式如：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&lt;div class=&quot;mod recommend-mod&quot;&gt;</span><br><span class="line">&lt;div class=&quot;hd recommend-title&quot;&gt;Tilte &lt;/div&gt;</span><br><span class="line">&lt;div class=&quot;bd recommend-body&quot;&gt;contents&lt;/div&gt;</span><br><span class="line">&lt;div class=&quot;ft recommend-footer&quot;&gt;footer &lt;/div&gt;</span><br><span class="line">&lt;/div&gt;</span><br></pre></td></tr></table></figure>
<p>当2个以上的结构不存在的时候可以不是采用此结构，如，没有hd和ft,bd也可以省略</p>
<h3 id="多选择器规则之间换行"><a href="#多选择器规则之间换行" class="headerlink" title="多选择器规则之间换行"></a>多选择器规则之间换行</h3><p>当样式针对多个选择器时每个选择器占一行</p>
<p>/ 推荐的写法 /</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">a.btn,</span><br><span class="line">input.btn,</span><br><span class="line">input[type=&quot;button&quot;] &#123;</span><br><span class="line">......</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h3 id="z-index"><a href="#z-index" class="headerlink" title="z-index"></a>z-index</h3><ol>
<li>自己写的z-index的值不能超过 100 (通用组的除外)</li>
<li>页面中的元素内容的z-index不能超过10(popup poptip除外)，需要按照内容定义1 2 3 4不允许直接使用如1000，9999</li>
<li>popup poptip的z-index需要按照内容使用 99以下，10以上的值（11,12,13，也可以小于10），不允许直接使用1000，9999之类大值<br>现在通用z-index记录,使用时请避开和灵活使用</li>
</ol>
<table>
<thead>
<tr>
<th>z-index</th>
<th>使用者</th>
<th>类型</th>
</tr>
</thead>
<tbody>
<tr>
<td>&lt;10</td>
<td>page-content</td>
<td>页面级别</td>
</tr>
<tr>
<td>&gt;10</td>
<td>&lt;99 <span class="Apple-tab-span" style="white-space:pre"></span> page-popup</td>
<td>页面级别</td>
</tr>
<tr>
<td>20</td>
<td>usercard用户名片</td>
<td>common通用</td>
</tr>
<tr>
<td></td>
<td>MSG气泡消息</td>
<td>common通用</td>
</tr>
<tr>
<td></td>
<td>common通用</td>
<td>common通用</td>
</tr>
<tr>
<td></td>
<td>Dialog</td>
<td>common通用</td>
<td>common通用</td>
</tr>
</tbody>
</table>
<h1 id="css规范"><a href="#css规范" class="headerlink" title="css规范"></a>css规范</h1><h3 id="css属性顺序"><a href="#css属性顺序" class="headerlink" title="css属性顺序"></a>css属性顺序</h3><ol>
<li>显示属性；</li>
<li>元素位置；</li>
<li>元素属性；</li>
<li>元素内容属性；</li>
<li>css书写顺序：</li>
</ol>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br></pre></td><td class="code"><pre><span class="line">例子:</span><br><span class="line">.header &#123;</span><br><span class="line">/* 显示属性 */</span><br><span class="line">display || visibility</span><br><span class="line">list-style</span><br><span class="line">position</span><br><span class="line">top || right || bottom || left</span><br><span class="line">z-index</span><br><span class="line">clear</span><br><span class="line">float</span><br><span class="line"></span><br><span class="line">/* 自身属性 */</span><br><span class="line">width</span><br><span class="line">max-width || min-width</span><br><span class="line">height</span><br><span class="line">max-height || min-height</span><br><span class="line">overflow || clip</span><br><span class="line">margin </span><br><span class="line">padding</span><br><span class="line">outline</span><br><span class="line">border</span><br><span class="line">background</span><br><span class="line"></span><br><span class="line">/* 文本属性 */</span><br><span class="line">color</span><br><span class="line">font</span><br><span class="line">text-overflow</span><br><span class="line">text-align</span><br><span class="line">text-indent</span><br><span class="line">line-height</span><br><span class="line">white-space</span><br><span class="line">vertical-align</span><br><span class="line">cursor</span><br><span class="line">content</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h3 id="css写法"><a href="#css写法" class="headerlink" title="css写法"></a>css写法</h3><ol>
<li>小图片 sprite 合并</li>
<li>每个样式属性后加 “;”</li>
<li>禁止将样式写为单行<br>如</li>
</ol>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">.hotel-content &#123;margin: 10px; background-color: #efefef;&#125;</span><br></pre></td></tr></table></figure>
<p>单行显示不好注释，不好备注，这应该是压缩工具的活儿~</p>
<ol start="4">
<li><p>禁止使用行内（inline）样式</p>
</li>
<li><p>禁止使用”*”来选择元素 <strong>(可以使用第三方初始化元素样式的库，来统一解决此问题)</strong></p>
</li>
</ol>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">/*别这样写*/</span><br><span class="line">* &#123;</span><br><span class="line">margin: 0;</span><br><span class="line">padding: 0;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>这样写是没有必要的，一些元素在浏览器中默认有margin或padding值，但是只是部分元素，没有必要将所有元素的margin、padding值都置为0。</p>
<ol start="6">
<li>带前缀的属性</li>
</ol>
<p>当使用特定浏览器带有前缀的属性时，通过缩进的方式，让每个属性的值在垂直方向对齐，这样便于多行编辑。如：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">.selector &#123;</span><br><span class="line">-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);</span><br><span class="line">box-shadow: 0 1px 2px rgba(0,0,0,.15);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol start="7">
<li>优化css选择器<br>css选择器是从右边到左边进行匹配的。如：</li>
</ol>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">#header a &#123;</span><br><span class="line">color: #444;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>浏览器会检查整个文档中的所有链接，然后浏览器并不仅仅检查每个链接的父元素，还要遍历文档树去查找 id 为 header 的祖先元素，如果被评估的链接不是 header 的后代，那么浏览器就要向上一级遍历知道文档的根节点。针对此问题，有以下几个解决方法：</p>
<ol>
<li>避免使用通配规则</li>
</ol>
<p>除了传统意义的通配选择符之外还包括相邻兄弟选择符, 子选择符, 后代选择符和属性选择符。推荐id、class和标签选择符。</p>
<ol start="2">
<li>不要限定id选择符<br>页面中指定一个id只能对应一个元素，所以没有必要添加额外添加限定符，如： div#header ，应该简化为： #header（提权的除外）。</li>
<li>不要限定类选择器<br>不要用具体的标签限定类选择符，而是根据实际情况对类名进行扩展。例如： ul.recommend ，改成 .recommend-list 或者 .list-recommend。</li>
<li>让规则越具体越好<br>尽量不要使用 ul li a 这样长的选择符，最好使用  .list-anchor 之类的选择符。</li>
<li>避免使用后代选择符<br>通常处理后代选择符开销最高，使用字选择符更高效，最好使用下一条代替。</li>
<li>避免使用标签子选择符<br>如果有如： #header &gt; li &gt; a，这样基于子标签的自选择符，那么应该使用一个class来关联每个元素如： .header-anchor。尽量使用具体的类代替子选择符。</li>
</ol>
<h1 id="前端规范之JavaScript"><a href="#前端规范之JavaScript" class="headerlink" title="前端规范之JavaScript"></a>前端规范之JavaScript</h1><h3 id="命名规范"><a href="#命名规范" class="headerlink" title="命名规范"></a>命名规范</h3><ol>
<li><p>文件命名可读性强<br>文件夹、文件的命名与命名空间应能代表代码功能，可读性强。</p>
</li>
<li><p>函数命名<br>驼峰命名方式</p>
</li>
</ol>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">function funName() &#123;&#125;</span><br></pre></td></tr></table></figure>
<ol start="3">
<li>常量<br>大写</li>
</ol>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">var VARIABLENAME</span><br></pre></td></tr></table></figure>
<ol start="4">
<li>变量<br>驼峰命名</li>
</ol>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">var variableName</span><br></pre></td></tr></table></figure>
<h3 id="编码规则"><a href="#编码规则" class="headerlink" title="编码规则"></a>编码规则</h3><ol>
<li>排版缩进<br>采用统一的缩进方式排版代码。缩进为2个ASCII空格</li>
</ol>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">If(condition1 || condition2) &#123;</span><br><span class="line">action1;</span><br><span class="line">&#125; else if (condition3 &amp;&amp; condition4) &#123;</span><br><span class="line">action2;</span><br><span class="line">&#125; else if (condition5</span><br><span class="line">&amp;&amp; condition6</span><br><span class="line">&amp;&amp; condition7</span><br><span class="line">&amp;&amp; condition8) &#123;</span><br><span class="line">action2;</span><br><span class="line">&#125; else &#123;</span><br><span class="line">default action;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol start="2">
<li>关键词、条件括弧后面使用空格；运算操作符号两侧使用空格；语句分割符‘,’后面使用空格</li>
</ol>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">var name[空格]=[空格]value;</span><br><span class="line">if[空格](a,[空格]b) &#123;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol start="3">
<li>左大括号”{“可以居行尾，也可写在下行首（独自一行）；右大括号”}”单独占一行，居行首</li>
</ol>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">if (a &amp;&amp; b) &#123;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">if (a &amp;&amp; b) </span><br><span class="line">&#123;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol start="4">
<li>句末必须用分号结尾</li>
</ol>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">var fn = function () &#123;</span><br><span class="line">&#125;;//这里没有分号的话，脚本解析器会报错！！！</span><br><span class="line">(function () &#123;</span><br><span class="line">alert(1);</span><br><span class="line">&#125;)();</span><br></pre></td></tr></table></figure>
<ol start="5">
<li>单行过长应在适当位置予以换行,增强可读性<br>if 语句括号中的条件若过多过长，应予以折行；折行后，||、&amp;&amp; 等符号应与 “(” 后的第一个字母纵向对齐</li>
</ol>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">if (condition1 </span><br><span class="line">&amp;&amp; condition2 </span><br><span class="line">|| condition3) &#123;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol start="6">
<li>if、while、for、do语句的执行体总是用”{“和”}”括起来，即使在其结构体内只有一条语句</li>
</ol>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">if (s==100) &#123;</span><br><span class="line">alert(&apos;shit!&apos;);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol start="7">
<li>语法意义相互独立的代码将用空行分隔</li>
</ol>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">a++; b++;   //！！！避免同一行书写两个表达式</span><br><span class="line">if (a &gt; b) &#123;</span><br><span class="line">value = a;  //行间不用空行间隔</span><br><span class="line">&#125;</span><br><span class="line">    </span><br><span class="line">var variableName = value;   //与上一代码行使用空行间隔</span><br></pre></td></tr></table></figure>
<h3 id="注释规范"><a href="#注释规范" class="headerlink" title="注释规范"></a>注释规范</h3><ol>
<li>文件注释</li>
</ol>
<ul>
<li><p>文件注释要标明作者、文件版本、创建/修改时间、重大版本修改记录</p>
</li>
<li><p>函数描述</p>
</li>
<li>文件版本、创建或者修改时间、功能、作者</li>
</ul>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">/**</span><br><span class="line">* @file Image.js</span><br><span class="line">* @description 功能详细描述</span><br><span class="line">*/</span><br></pre></td></tr></table></figure>
<ul>
<li>函数或者类等都要添加头描述</li>
</ul>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">/**</span><br><span class="line">* 简述</span><br><span class="line">*</span><br><span class="line">* 功能详细描述</span><br><span class="line">*</span><br><span class="line">* @param &lt;String&gt; arg1 参数1</span><br><span class="line">* @param &lt;Number&gt; arg2 参数2，默认为0</span><br><span class="line">* @return &lt;Boolean&gt; 看xxx是否成功</span><br><span class="line">*/</span><br><span class="line">function fooFunction (arg1, arg2) &#123;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol start="2">
<li>操作注释</li>
</ol>
<ul>
<li>单行注释,写在代码上面</li>
<li>多行注释</li>
</ul>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">/*</span><br><span class="line">* 注释操作说明</span><br><span class="line">*/</span><br><span class="line">for( var i = 0; i &lt; obj.lenght; i++) &#123;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ul>
<li>注释标签参考</li>
</ul>
<table>
<thead>
<tr>
<th>标签</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>@addon</td>
<td>把一个函数标记为另一个函数的扩张，另一个函数的定义不在源文件中。</td>
</tr>
<tr>
<td>@argument</td>
<td>用大括号中的自变量类型描述一个自变量。</td>
</tr>
<tr>
<td>@author</td>
<td>函数/类作者的姓名。</td>
</tr>
<tr>
<td>@base</td>
<td>如果类是继承得来，定义提供的类名称。</td>
</tr>
<tr>
<td>@class</td>
<td>用来给一个类提供描述，不能用于构造器的文档中。</td>
</tr>
<tr>
<td>@constructor</td>
<td>描述一个类的构造器。</td>
</tr>
<tr>
<td>@deprecated</td>
<td>表示函数/类已被忽略。</td>
</tr>
<tr>
<td>@exception</td>
<td>表示函数/类已被忽略。</td>
</tr>
<tr>
<td>@exec</td>
<td></td>
</tr>
<tr>
<td>@extends</td>
<td>表示派生出当前类的另一个类。</td>
</tr>
<tr>
<td>@fileoverview</td>
<td>表示文档块将用于描述当前文件。这个标签应该放在其它任何标签之前。</td>
</tr>
<tr>
<td>@final</td>
<td>指出函数/类。</td>
</tr>
<tr>
<td>@ignore</td>
<td>让jsdoc忽视随后的代码。</td>
</tr>
<tr>
<td>@link</td>
<td>类似于@link标签，用于连接许多其它页面。</td>
</tr>
<tr>
<td>@member</td>
<td>定义随后的函数为提供的类名称的一个成员。</td>
</tr>
<tr>
<td>@param</td>
<td>用大括号中的参数类型描述一个参数。</td>
</tr>
<tr>
<td>@private</td>
<td>表示函数/类为私有，不应包含在生成的文档中。</td>
</tr>
<tr>
<td>@requires</td>
<td>表示需要另一个函数/类。</td>
</tr>
<tr>
<td>@return</td>
<td>描述一个函数的返回值。</td>
</tr>
<tr>
<td>@returns</td>
<td>描述一个函数的返回值。</td>
</tr>
<tr>
<td>@see</td>
<td>连接到另一个函数/类。</td>
</tr>
<tr>
<td>@throws</td>
<td>描述函数/类可能产生的错误。</td>
</tr>
<tr>
<td>@type</td>
<td>指定函数/成员的返回类型。</td>
</tr>
<tr>
<td>@version</td>
<td>函数/类的版本号。</td>
</tr>
</tbody>
</table>
<h3 id="条件判断的陷阱"><a href="#条件判断的陷阱" class="headerlink" title="条件判断的陷阱"></a>条件判断的陷阱</h3><ol>
<li>在if判断中，使用<code>===</code>作比较,避免掉入<code>==</code>造成的陷阱</li>
</ol>
<ul>
<li>在条件判断时，这样的一些值表示false：<code>null</code>，<code>undefined</code>，字符串<code>&#39;&#39;</code>，数字<code>0</code>，<code>NaN</code></li>
<li>而在<code>==</code>时，则会有一些让人难以理解的陷阱,如：</li>
</ul>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">(function () &#123; </span><br><span class="line">var undefined; </span><br><span class="line">undefined == null; // true </span><br><span class="line">1 == true; //true </span><br><span class="line">2 == true; // false </span><br><span class="line">0 == false; // true </span><br><span class="line">0 == &apos;&apos;; // true </span><br><span class="line">NaN == NaN;// false </span><br><span class="line">[] == false; // true </span><br><span class="line">[] == ![]; // true </span><br><span class="line">&#125;)();</span><br></pre></td></tr></table></figure>
<ul>
<li>对于不同类型的 <code>==</code> 判断，有这样一些规则，顺序自上而下：</li>
</ul>
<ol>
<li>undefined与null相等</li>
<li>一个是number一个是string时，会尝试将string转换为number</li>
<li>尝试将boolean转换为number，0或1</li>
<li>尝试将Object转换成number或string，取决于另外一个对比量的类型<br>所以，对于0、空字符串的判断，建议使用 <code>===</code> 。<code>===</code>会先判断两边的值类型，类型不匹配时为false。</li>
</ol>
<h3 id="简单类型转换"><a href="#简单类型转换" class="headerlink" title="简单类型转换"></a>简单类型转换</h3><ol>
<li>number to string的转换，建议使用 1 + ‘’或String(1)，不使用new String(1)或1.toString()的方式。</li>
<li>string to number的转换，建议使用parseInt，必须显式指定第二个参数的进制。下面的例子展示了不指定进制的风险：</li>
</ol>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">parseInt(&apos;08&apos;); // 0 </span><br><span class="line">parseInt(&apos;08&apos;, 10); //8</span><br></pre></td></tr></table></figure>
<ol start="3">
<li>float to integer的转换，建议使用Math.floor/Math.round/Math.ceil方法，不使用parseInt。</li>
</ol>
<h3 id="字符串拼接"><a href="#字符串拼接" class="headerlink" title="字符串拼接"></a>字符串拼接</h3><p>字符串拼接，应使用数组保存字符串片段，使用时调用join方法。避免使用+或+=的方式拼接较长的字符串，每个字符串都会使用一个小的内存片段，过多的内存片段会影响性能。如:</p>
<p>不好的拼接方式，+=</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">var str = &apos;&apos;; </span><br><span class="line">for (var i = 0, len = list.length; i &lt; len; i++) &#123; </span><br><span class="line">str+= &apos;&lt;div&gt;&apos; + list[i] + &apos;&lt;/div&gt;&apos;; </span><br><span class="line">&#125; </span><br><span class="line">dom.innerHTML = str;</span><br></pre></td></tr></table></figure>
<p>正确拼接方式，Array的push+join</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">var str = []; </span><br><span class="line">for (var i = 0, len = list.length; i &lt; len; i++) &#123; </span><br><span class="line">str.push(&apos;&lt;div&gt;&apos;+ list[i] + &apos;&lt;/div&gt;&apos;); </span><br><span class="line">&#125; </span><br><span class="line">dom.innerHTML = str.join(&apos;&apos;);</span><br></pre></td></tr></table></figure>
<h3 id="获取元素"><a href="#获取元素" class="headerlink" title="获取元素"></a>获取元素</h3><ol>
<li>获取单个元素</li>
</ol>
<p>通常，我们使用document.getElementById来获取dom元素，避免使用document.all。document.getElementById是标准方法，兼容所有浏览器</p>
<p>ie浏览器会混淆元素的id和name属性，document.getElementById可能获得不期望的元素。<br>在对元素的id与name属性的命名需要非常小心，应使用不同的命名法。<br>下面是一个name与id冲突的例子：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&lt;input type=&quot;text&quot; name=&quot;test&quot;&gt; &lt;div id=&quot;test&quot;&gt;&lt;/div&gt;</span><br><span class="line">&lt;button onclick=&quot;alert(document.getElementById(&apos;test&apos;).tagName)&quot;&gt;&lt;/button&gt;</span><br><span class="line">&lt;!-- ie6下为INPUT --&gt;</span><br></pre></td></tr></table></figure>
<h1 id="静态资源管理规范"><a href="#静态资源管理规范" class="headerlink" title="静态资源管理规范"></a>静态资源管理规范</h1><h3 id="图片"><a href="#图片" class="headerlink" title="图片"></a>图片</h3><ol>
<li>修饰图片</li>
</ol>
<ul>
<li>合成雪碧图，减少HTTP请求。<strong>(推荐，不强制) </strong>  </li>
<li>命名<br><strong>页面英文 - 功能英文 - [序号] . 后缀</strong></li>
</ul>
<p>其中，功能引文可用意义明显的简写，共用图片可用common开头。<br>例如：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">index-button.jpg</span><br><span class="line">list-background-01.jpg</span><br><span class="line">detail-bg-02.jpg</span><br><span class="line">common-corner-01.png</span><br></pre></td></tr></table></figure>
<ol start="2">
<li>内容图片<br>内容图片如非必要，请保存至OSS上，减少占用服务器带宽以及硬盘容量。</li>
</ol>

            </div>
        
        <footer class="article-footer">
        </footer>
    </div>
</article>


    




    
    




<!-- baidu url auto push script -->
<script type="text/javascript">
    !function(){var e=/([http|https]:\/\/[a-zA-Z0-9\_\.]+\.baidu\.com)/gi,r=window.location.href,o=document.referrer;if(!e.test(r)){var n="//api.share.baidu.com/s.gif";o?(n+="?r="+encodeURIComponent(document.referrer),r&&(n+="&l="+r)):r&&(n+="?l="+r);var t=new Image;t.src=n}}(window);
</script>     
</section>
        </div>
        <footer id="footer">
    <div class="outer">
        <div id="footer-info" class="inner">
            IFC &copy; 2019 
            <a rel="license" href="http://creativecommons.org/licenses/by-nc-nd/4.0/"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by-nc-nd/4.0/80x15.png"></a>
            <br> Powered by <a href="http://hexo.io/" target="_blank">Hexo</a>. Theme - <a href="https://github.com/zthxxx/hexo-theme-Wikitten">wikitten</a>
            
                <br>
                <span id="busuanzi_container_site_pv"><i class="fa fa-eye"></i> <span id="busuanzi_value_site_pv"></span></span>
                &nbsp;|&nbsp;
                <span id="busuanzi_container_site_pv"><i class="fa fa-user"></i> <span id="busuanzi_value_site_uv"></span></span>
            
        </div>
    </div>
</footer>

        

    
        <script src="/ifc_documents/libs/lightgallery/js/lightgallery.min.js"></script>
        <script src="/ifc_documents/libs/lightgallery/js/lg-thumbnail.min.js"></script>
        <script src="/ifc_documents/libs/lightgallery/js/lg-pager.min.js"></script>
        <script src="/ifc_documents/libs/lightgallery/js/lg-autoplay.min.js"></script>
        <script src="/ifc_documents/libs/lightgallery/js/lg-fullscreen.min.js"></script>
        <script src="/ifc_documents/libs/lightgallery/js/lg-zoom.min.js"></script>
        <script src="/ifc_documents/libs/lightgallery/js/lg-hash.min.js"></script>
        <script src="/ifc_documents/libs/lightgallery/js/lg-share.min.js"></script>
        <script src="/ifc_documents/libs/lightgallery/js/lg-video.min.js"></script>
    
    
        <script src="/ifc_documents/libs/justified-gallery/jquery.justifiedGallery.min.js"></script>
    
    
        <script type="text/x-mathjax-config">
    MathJax.Hub.Config({
        tex2jax: {
            inlineMath: [ ["$","$"], ["\\(","\\)"] ],
            skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code'],
            processEscapes: true,
            TeX: {
                equationNumbers: {
                  autoNumber: 'AMS'
                }
            }
        }
    });
    MathJax.Hub.Queue(function() {
        var all = MathJax.Hub.getAllJax();
        for (var i = 0; i < all.length; ++i)
            all[i].SourceElement().parentNode.className += ' has-jax';
    });
</script>
<script async src="//cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
    



<!-- Custom Scripts -->
<script src="/ifc_documents/js/main.js"></script>

    </div>
</body>
</html>